<template>
    <div>
        <!-- 渲染商品表 -->
        <div class="goods-list">
        <a :href="item.url" class="goods-item" v-for="item in goodslist" :key="item.id" tag="div" target="_blank">
            <img :src="item.img_url" alt="">
            <h1 class="goods-title">{{item.title}}</h1>
            <div class="goods-info">
                <p class="goods-price">
                    <span class="new">￥{{item.sell_price}}</span>
                    <span class="old">￥{{item.market_price}}</span>
                </p>
                <p class="sell">
                    <span>热卖中</span>
                    <span>剩{{item.stock_quantity}}件</span>
                </p>
            </div>
        </a>
        </div>
        <!-- elemntui的分页组件 -->
        <div class="overflow-auto">
        <el-pagination
     background
    layout="sizes,prev, pager, next"
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
    :total="totalCount"
    :current-page.sync="currentPage"
    :page-sizes="pageSizes"
    :page-size="pageSize"
    >
  </el-pagination>
        </div>

        </div>
        
</template>
<script>
export default {
    data() {
        return {
            goodslist:[
                // {id:1,title:'',add_time,zhaiyao,click,img_url,sell_price,market_price,stock_quantity}
                {id:1,title:'现挖新鲜红薯板栗红薯沙地红蜜薯农家自种小红薯山芋番薯地瓜10斤',
                url:"https://detail.tmall.com/item.htm?spm=a220m.1000858.1000725.1.1c1a779fnr0CqT&id=559387428719&skuId=4611686577814816623&user_id=3403547668&cat_id=2&is_b=1&rn=a1ac4a7e011bd01da5bca0ab1a2a3896",
                click:13215,img_url:"https://img.alicdn.com/bao/uploaded/i2/3403547668/TB2x8PsejuhSKJjSspjXXci8VXa_!!3403547668.jpg",
                sell_price:2199,market_price:2399,stock_quantity:199},
                {id:2,title:'铁皮石斛霍山野生靓品农产品云南无渣干',
                url:"https://detail.tmall.com/item.htm?spm=a220m.1000858.0.0.65dd325e2ueSeA&id=610830907756&skuId=4291792364371&is_b=1&cat_id=2&q=%25CC%25FA%25C6%25A4+%25CA%25AF%25F5%25FA+%25D2%25B0%25C9%25FA",
                click:525,img_url:"https://img.alicdn.com/imgextra/i3/798310066/O1CN01vABj341CMGitAMVJw_!!0-saturn_solar.jpg_220x220.jpg_.webp",
                sell_price:58.88,market_price:199,stock_quantity:5000},
                {id:3,title:'2斤包顺丰 鱼皮饺子 手工鱼册火锅食材',
                url:"https://item.jd.com/27569686500.html",
                click:5215,img_url:"https://img.alicdn.com/imgextra/i1/13298578/TB2kVMyXBUSMeJjSszcXXbnwVXa_!!0-saturn_solar.jpg_220x220.jpg_.webp",
                sell_price:28.80,market_price:59,stock_quantity:199},
                {id:4,title:'灵芝正品农户自产500 g原林参茸东北袍',
                url:"http://www.ppa7.com/p/10128334587/",
                click:515,img_url:"https://img.alicdn.com/imgextra/i1/16572215/O1CN01QLeiIJ1SEVoOa7Tfn_!!0-saturn_solar.jpg_220x220.jpg_.webp",
                sell_price:252,market_price:399,stock_quantity:199},
                {id:5,title:'新鲜紫薯冰淇淋红薯一点红番薯现挖农家',
                url:"https://item.jd.com/51439285130.html",
                click:535,img_url:"https://img.alicdn.com/imgextra/i1/122186082/O1CN01hvUeYe1unbRoQnihh_!!0-saturn_solar.jpg_220x220.jpg_.webp",
                sell_price:24.80,market_price:33,stock_quantity:199},
                {id:6,title:'西双版纳老品种带皮甜糯粘玉米棒',
                url:"https://item.jd.com/53465167119.html",
                click:1215,img_url:"https://img.alicdn.com/imgextra/i2/121076661/TB2v1_VtVGWBuNjy0FbXXb4sXXa_!!0-saturn_solar.jpg_220x220.jpg_.webp",
                sell_price:51.90,market_price:60,stock_quantity:199},
                {id:7,title:'2500g净含量壳皮大麦粒大麦茶原料发芽食用农产品',
                url:"https://item.jd.com/64637761387.html",
                click:1215,img_url:"https://img12.360buyimg.com/n7/jfs/t1/105403/4/8870/284794/5e071b28E90731c61/3fd7ee7611882c85.jpg",
                sell_price:28.00,market_price:40,stock_quantity:199},
                {id:8,title:'绿豆沂蒙新货自种五谷杂粮农产品发绿豆芽5斤装毛绿豆',
                url:"https://item.jd.com/66198990372.html",
                click:1215,img_url:"https://img12.360buyimg.com/n7/jfs/t1/94797/16/14267/106708/5e638e58E1bc207bc/3e245adcd8824aaf.jpg",
                sell_price:96.00,market_price:120.00,stock_quantity:1},
                {id:9,title:'现挖新鲜红薯板栗红薯沙地红蜜薯农家自种小红薯山芋番薯地瓜10斤',
                url:"https://detail.tmall.com/item.htm?spm=a220m.1000858.1000725.1.1c1a779fnr0CqT&id=559387428719&skuId=4611686577814816623&user_id=3403547668&cat_id=2&is_b=1&rn=a1ac4a7e011bd01da5bca0ab1a2a3896",
                click:13215,img_url:"https://img.alicdn.com/bao/uploaded/i2/3403547668/TB2x8PsejuhSKJjSspjXXci8VXa_!!3403547668.jpg",
                sell_price:2199,market_price:2399,stock_quantity:199},
                {id:10,title:'铁皮石斛霍山野生靓品农产品云南无渣干',
                url:"https://detail.tmall.com/item.htm?spm=a220m.1000858.0.0.65dd325e2ueSeA&id=610830907756&skuId=4291792364371&is_b=1&cat_id=2&q=%25CC%25FA%25C6%25A4+%25CA%25AF%25F5%25FA+%25D2%25B0%25C9%25FA",
                click:525,img_url:"https://img.alicdn.com/imgextra/i3/798310066/O1CN01vABj341CMGitAMVJw_!!0-saturn_solar.jpg_220x220.jpg_.webp",
                sell_price:58.88,market_price:199,stock_quantity:5000},
                {id:11,title:'2斤包顺丰 鱼皮饺子 手工鱼册火锅食材',
                url:"https://item.jd.com/27569686500.html",
                click:5215,img_url:"https://img.alicdn.com/imgextra/i1/13298578/TB2kVMyXBUSMeJjSszcXXbnwVXa_!!0-saturn_solar.jpg_220x220.jpg_.webp",
                sell_price:28.80,market_price:59,stock_quantity:199},
                {id:12,title:'灵芝正品农户自产500 g原林参茸东北袍',
                url:"http://www.ppa7.com/p/10128334587/",
                click:515,img_url:"https://img.alicdn.com/imgextra/i1/16572215/O1CN01QLeiIJ1SEVoOa7Tfn_!!0-saturn_solar.jpg_220x220.jpg_.webp",
                sell_price:252,market_price:399,stock_quantity:199},
                {id:13,title:'新鲜紫薯冰淇淋红薯一点红番薯现挖农家',
                url:"https://item.jd.com/51439285130.html",
                click:535,img_url:"https://img.alicdn.com/imgextra/i1/122186082/O1CN01hvUeYe1unbRoQnihh_!!0-saturn_solar.jpg_220x220.jpg_.webp",
                sell_price:24.80,market_price:33,stock_quantity:199},
                {id:14,title:'西双版纳老品种带皮甜糯粘玉米棒',
                url:"https://item.jd.com/53465167119.html",
                click:1215,img_url:"https://img.alicdn.com/imgextra/i2/121076661/TB2v1_VtVGWBuNjy0FbXXb4sXXa_!!0-saturn_solar.jpg_220x220.jpg_.webp",
                sell_price:51.90,market_price:60,stock_quantity:199},
                {id:15,title:'2500g净含量壳皮大麦粒大麦茶原料发芽食用农产品',
                url:"https://item.jd.com/64637761387.html",
                click:1215,img_url:"https://img12.360buyimg.com/n7/jfs/t1/105403/4/8870/284794/5e071b28E90731c61/3fd7ee7611882c85.jpg",
                sell_price:28.00,market_price:40,stock_quantity:199},
                {id:16,title:'绿豆沂蒙新货自种五谷杂粮农产品发绿豆芽5斤装毛绿豆',
                url:"https://item.jd.com/66198990372.html",
                click:1215,img_url:"https://img12.360buyimg.com/n7/jfs/t1/94797/16/14267/106708/5e638e58E1bc207bc/3e245adcd8824aaf.jpg",
                sell_price:96.00,market_price:120.00,stock_quantity:1},
            ],
            //分页ui的当前页数
            currentPage:1,
            //每页显示条目个数
            pageSize:6,
            pageSizes:[6, 8, 10, 20],
            //总条目数,必须得写
            totalCount:100,
        }
    },
    methods: {
        //定义获取商品列表方法
        // getGoodsList(){
        //     this.$http.get(url+   this.pageindex).then(result=>{
        //         if(result.body.status === 0)
        //         this.goodslist = result.body.message;
        //     })
        // }，
        //分页导航的方法
        linkGen(pageNum) {
        return pageNum === 1 ? '?' : `?page=${pageNum}`
      }
    },
}

</script>
<style scoped>
    .goods-list{
        width: 1100px;
       display: flex;
       flex-wrap:wrap; 
       /* border: 1px solid red; */
       position: relative;
       left: 50%;
       transform: translateX(-50%);
       padding: 7px;
       
       /* justify-content: space-between; */
    }
    .goods-item{
        width: 23%;
        border: 1px solid #ccc;
        box-shadow: 0 0 8px #ccc;
        margin: 6px 10px;
        padding: 2px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        min-height: 220px;
    }
    .goods-title{
        font-size: 13px;
        padding: 7px 0px;
    }
    img{
        width: 100%;
    }
    .goods-info{
        background-color: #eee;
    }
    p{
        margin: 0px;
        padding-bottom: 7px;
    }
    .new{
        color: red;
        font-size: 18px;
        font-weight: bold;
    }
    .old{
        font-size: 12px;
        text-decoration: line-through;
        padding-left: 10px;
    }
    .sell{
        display: flex;
        justify-content: space-between
    }
    .sell span{
        font-size: 12px;
    }
    .overflow-auto{
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
    }
    /* 去除a标签的所有默认样式 */
    a{
        text-decoration: none;
        color: black;
    }
    a:hover{
        text-decoration: none;
        color: #7f7f7f;
    }
</style>